iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
2
Modern Web

「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站系列 第 11

[VR 前後端交響曲Day11] Vue元件單向傳遞: $emit 製作todo list

  • 分享至 

  • xImage
  •  

經過昨天介紹$emit可以傳遞自訂的事件給父層元件之後,今天來利用$emit的特性,設計一個3M便利貼風格的to-do list吧!

實作需求:

  • 新增
    我想要在input欄位裡,讓使用者從Todos元件輸入本日代辦事項,
    按完enter送出後,把資料送去Root元件裡顯示。

  • 刪除
    點擊任一的todo item,就可以把item從todo陣列裡移除。

Step0. Todos元件:設計template

input form綁上雙向事件處理的v-on,讓使用者enter送出後呼叫createItem這個methods裡面的function。

Step1. Todos元件的methods: $emit('自訂事件名稱')傳出事件

createItem($event)方法裡面帶了參數,讓我們可以把$event.target.value傳到上層的Vue Instance。

Todos.vue

<template id="todo-3M">
  <div class="todo-form">
      <label>本日To do list</label><i class="fas fa-pencil-alt" ></i><hr>
      <input class="todo-input" type='text' @keyup.enter="createItem" placeholder="請輸入您今天的代辦事項">
  </div>
</template>

<script>
  export default {              
    methods: {
      createItem($event){
        this.$emit("additem", $event.target.value)
        $event.target.value = ""
      }
    },
    template: "#todo-3M"
  }
</script>

<style scoped>
<!-- 略 -->
</style>

Step2. 在Vue Root掛載點,接收傳出來的事件

Vue Root掛載點內的<Todos>元件,綁上雙向事件處理的v-on
<Todos>元件傳遞出來的additem可以跟Root元件的addMoreItem綁定

home.html.erb

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案:{{ day }}</div>
  <div class="main-body">本日主題:{{ topic }}</div>

  <Todos @additem="addMoreItem"></Todos>
  <ul class="todo-item">
    <li v-for="todo in todos" @click="removeItem(todo)"><i class="far fa-calendar-check"></i> {{ todo }} </li>
  </ul>
  
  <Foot></Foot>
</div>

Step3. 父元件接收事件後,執行addMoreItem() function

我的todos陣列初始值預設有三件代辦事項。父元件接收事件之後,還可以再把其他代辦事項push進去這個陣列。

Step4. v-for裡的todo迴圈,使用@click事件綁定removeItem(todo) function

若對單一todoitem點擊,則透過javascript的splice方法,把該項todo item從陣列中移除。

home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Todos from "../components/todos"
import Foot from "../components/foot"


Vue.use(TurbolinksAdapter)

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      el,
      data: {
        day: "第 11 天",
        topic: "元件的由內而外傳遞事件 - emit",
        todos: ["買咖啡", "買口罩", "去郵局"],
      },
      methods: {
        addMoreItem(item){
          this.todos.push(item)
        },
        removeItem(item){
          let itemIndex = this.todos.indexOf(item)
          if (itemIndex >= 0){
            // 從array中刪除項目,並回傳被刪除後的項目
            this.todos.splice(itemIndex, 1)
          }
        }
      },
      components: { Todos, Foot }
    })    
  }
})

完成圖:

如果非父子元件之間傳遞,而是平行階層、或是跨階層的元件資料傳遞,
我們會透過Vue的event bus來實作,或者是以Vuex進行狀態管理。
這就是明後兩天要介紹的部份囉~請待下回分解!

Ref:


上一篇
[VR 前後端交響曲Day10] Vue元件裡由內而外的事件單向傳遞: $emit
下一篇
[VR 前後端交響曲Day12] 跨多層的Vue元件資料傳遞: event bus
系列文
「VR 」前端後端交響曲 - 30天開發 Vue.js feat. Ruby on Rails即時互動網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言